<template lang="pug">
  .zgplugin-picupload.zgplugin-empty(v-if="(!exist || !show)&&editor")
    svg-icon.empty-icon(icon-class="组件图片上传")
  el-form-item.zgplugin-picupload(v-show="show" v-else-if="exist" :class="config.label?'':'form-label-hidden'"  :label="config.label" :prop="config.propertyName" :rules="rules")
    div.flex-box(v-if="scope")
      div.show-border(v-for="(one, index) in scope[config.propertyName]")
        img.img-view(:src="one.url ? fileUrl + one.url : ''")
        .mode(v-if="!readonly")
          .icon-box
            i.el-icon-zoom-in(@click="viewFull(one.url ? fileUrl + one.url : '')" style="margin-right: 8px;")
            i.el-icon-delete(@click="handleRemove(index)")
      div.upload-border(v-if="!readonly && (!config.lengthLimit || scope[config.propertyName].length < config.lengthLimit)")
        el-upload(:show-file-list='false' accept="image/png, image/jpeg" :is-mobile='isMobile' class="upload-demo" :disabled="readonly" :on-remove='handleRemove' :on-change="handleChange" action=""
        multiple :file-list="scope[config.propertyName]" :http-request="uploadFile")
          i(class="el-icon-plus")
    .full-view-box(v-if="fullViewShow")
      img.full-view-img(:src="fullViewImg")
      i.el-icon-close(@click="fullViewShow = false")
    div.flex-box(v-if="!scope")
      div.show-border(v-for="(one, index) in rootForm.properties[config.propertyName]")
        img.img-view(:src="one.url ? fileUrl + one.url : ''")
        .mode(v-if="!readonly")
          .icon-box
            i.el-icon-zoom-in(@click="viewFull(one.url ? fileUrl + one.url : '')" style="margin-right: 8px;")
            i.el-icon-delete(@click="handleRemove(index)")
      div.upload-border(v-if="!readonly && (!config.lengthLimit || rootForm.properties[config.propertyName].length < config.lengthLimit)")
        el-upload(:show-file-list='false' accept="image/png, image/jpeg" :is-mobile='isMobile' class="upload-demo" :disabled="readonly" :on-remove='handleRemove' :on-change="handleChange" action=""
        multiple :file-list="rootForm.properties[config.propertyName]" :http-request="uploadFile")
          i(class="el-icon-plus")
    .full-view-box(v-if="fullViewShow")
      img.full-view-img(:src="fullViewImg")
      i.el-icon-close(@click="fullViewShow = false")
</template>

<script>
import renderCommon from '../common/renderCommon'

export default {
  mixins: [renderCommon],
  methods: {
    viewFull(url) {
      this.fullViewImg = url
      this.fullViewShow = true
    }
  }
}
</script>
<style lang="scss" scoped>
.full-view-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100001;
  background: rgba($color: #000000, $alpha: 0.7);

  .full-view-img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .el-icon-close {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 40px;
    color: #ddd;
    background: #333;
    border-radius: 50%;
    cursor: pointer;
  }
}
.zgplugin-picupload {
  margin-top: 16px;
  margin-bottom: 0 !important;
  .flex-box {
    display: flex;
  }
  .show-border {
    border: 1px solid #aaa;
    color: #999;
    width: 80px;
    height: 80px;
    font-size: 20px;
    overflow: hidden;
    position: relative;

    &:hover .mode{
      display: block;
    }

    .mode {
      position: absolute;
      display: none;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      background: rgba(33, 33, 33, .6);
    }

    .icon-box {
      position: absolute;
      text-align: center;
      width: 100%;
      top: 50%;
      color: #409EFF;
      transform: translateY(-50%);
      cursor: pointer;
    }

    .img-view {
      width: 100%;
      height: 100%;
    }
  }
  .upload-border {
    border: 1px dashed #aaa;
    color: #999;
    width: 80px;
    height: 80px;
    font-size: 20px;
    .upload-demo {
      width: 100%;
      height: 100%;
      line-height: 78px;
      text-align: center;
    }
  }
}
</style>
